import React, { useEffect, useState } from "react";
import NavBar from "./components/NavBar";
import Tabbar from "../../components/Tabbar/index";
import {
  bannerList,
  featchCate,
  addShoppingCartApi,
  getProductList,
} from "@/api"; // 接口
import {
  Swiper,
  Image,
  Grid,
  Card,
  InfiniteScroll,
  Skeleton,
  Button,
  Toast,
} from "antd-mobile"; // 组件库
import { useNavigate } from "umi";
import "./assets/css/style.scss";
import axios from "axios";
import Qs from "qs";
export default function index() {
  /* 定义 useNavigate */
  const navigate = useNavigate();

  /* 轮播图部分 */
  const [bannerLists, setBannerLists] = useState([]); // 设置 轮播数据初始值
  const featchBanner = async () => {
    const res = await getProductList();
    if (res.data.code == "200") {
      setBannerLists(res.data.data);
    }
  };
  /* 商品列表部分 */
  const [productList, setProductList] = useState<Array<any>>([]);
  const featchProductList = () => {
    getProductList().then((res: any) => {
      setProductList(res.data.data);
    });
  };
  // 点赞
  const addProductStar = async (id: number) => {
    const starProductId = {
      productId: id,
    };

    const res = await axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        token: localStorage.getItem("token"),
      },
      method: "get",
      url: "http://43.139.124.13:8888/star/addProductStar",
      params: starProductId,
    });
    if (res.data.code == "200") {
      Toast.show("点赞成功");
    } else {
      Toast.show(res.data.msg);
    }
  };

  // 加入购物车
  const addShoppingCart = async (id: any) => {
    const res = await addShoppingCartApi([{ count: 1, productId: id }]);
    if (res.data.code == "200") {
      Toast.show("购物车加入成功");
    } else {
      Toast.show("购物车加入失败");
    }
    console.log(typeof id);
  };
  /* useEffect 钩子 */
  useEffect(() => {
    featchBanner();
    featchProductList();
  }, []);
  return (
    <div className="home">
      {/* 头部搜索栏 */}
      <NavBar></NavBar>
      {/* 轮播 骨架屏 */}

      {/* 轮播部分 */}
      <Swiper autoplay loop>
        {bannerLists.map((element: any) => (
          <Swiper.Item key={element.id}>
            <Image src={element.image} />
          </Swiper.Item>
        ))}
      </Swiper>
      {/* 商品列表 */}
      <div className="cateList">
        {
          /* 循环 渲染商品卡片 */
          productList.map((element: any) => (
            <Card key={element.id} title={element.name}>
              <div className="cardLeft">
                <Image
                  onClick={() => {
                    navigate("/cateContent", {
                      state: {
                        id: element.id,
                      },
                    });
                  }}
                  src={element.image}
                />
              </div>
              <div className="cardRight">
                <span>
                  {element.description ? element.description : "暂无详情"}
                </span>
                <span>{`剩余库存:${element.store}`}</span>
                <span style={{ color: "red" }}>{`￥${element.price}`}</span>
                <Button
                  onClick={() => {
                    addProductStar(element.id);
                  }}
                  size="mini"
                >
                  点赞
                </Button>
                <Button
                  onClick={() => {
                    addShoppingCart(element.id);
                  }}
                  size="mini"
                >
                  加入购物车
                </Button>
              </div>
            </Card>
          ))
        }
        {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
      </div>
      {/* 底部 */}
      <Tabbar></Tabbar>
    </div>
  );
}
